import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import * as actionTypes from './store/actionCreators';
import Loading from "../../baseUI/loading";
import { List, ListItem, SongList, Container } from "./style";
import Scroll from "../../baseUI/scroll";
import { EnterLoading } from "./../singers/style";
import { filterIndex, filterIdx } from "../../api/utils";
import { renderRoutes } from "react-router-config";
import { forceCheck } from 'react-lazyload';
import { getRankListRequest } from '../../api/request';

function Rank(props) {
  // const { rankList, loading } = props;
  // const { getRankListDataDispatch } = props;

  const [rankList, setRankList] = useState([]);
  const [loading, setLoading] = useState(true);

  // didMount的时候执行
  useEffect(() => {
      if (!rankList.length) {
        // getRankListDataDispatch();
        getRankListRequest().then(res => {
          setRankList(res.list);
          setLoading(false);
        }).catch(() => {
          console.error('获取数据失败！');
        });
      }
      // eslint-disable-next-line
  }, []);

  const enterDetail = (name) => {
    const idx = filterIdx(name);
    if (idx === null) {
      alert("暂无相关数据");
      return;
    }
  };

  const renderSongList = (list) => {
    return list.length ? (
      <SongList>
        {list.map((item, index) => {
          return (
            <li key={item.first + index}>
              {index + 1}. {item.first} - {item.second}
            </li>
          );
        })}
      </SongList>
    ) : null;
  };

  // 渲染排行榜
  const renderRankList = (list, global) => {
    return (
      <List globalRank={global}>
        {list.map((item, index) => {
          return (
            <ListItem
              key={item.coverImgId + item.coverImgUrl}
              tracks={item.tracks}
              onClick={() => enterDetail(item.name)}
            >
              <div className="img_wrapper">
                <img src={item.coverImgUrl} alt="" />
                <div className="decorate"></div>
                <span className="update_frequecy">{item.updateFrequency}</span>
              </div>
              {renderSongList(item.tracks)}
            </ListItem>
          );
        })}
      </List>
    );
  };


  let rankListJS = rankList ? rankList : [];
  let globalStartIndex = filterIndex(rankListJS );
  let officialList = rankListJS.slice(0, globalStartIndex);
  let globalList = rankListJS.slice(globalStartIndex);
  let displayStyle = true ? {"display":"none"}:  {"display": ""};

  return (
    <Container>
      <Scroll className='list' onScroll={forceCheck}>
        <div>
          <h1 className="offical" style={displayStyle}>官方榜</h1>
            { renderRankList(officialList, false) }
          <h1 className="global" style={displayStyle}>全球榜</h1>
            { renderRankList(globalList, true) }
          {loading ? <EnterLoading><Loading></Loading></EnterLoading> : null}
        </div>
      </Scroll>
      {renderRoutes(props.route.routes)}
    </Container>
    );
};

// 映射Redux全局的state到组件的props上
const mapStateToProps = (state) => {
  return {
    // 这里不要将数据进行toJS
    rankList: state.getIn(["rank", "rankList"]),
    loading: state.getIn(["rank", "loading"]),
  };
};

//  映射dispatch到props上
const mapDispatchToProps = (dispatch) => {
  return {
    getRankListDataDispatch() {
      dispatch(actionTypes.getRankList());
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Rank));
